<template>
    <div class="model-manage">
        <div class="query-form">
            <el-form ref="form" :inline="true" :model="queryForm">
                <el-form-item label="模型名称" prop="modelName">
                    <el-input v-model="queryForm.modelName" placeholder="请输入模型名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleQuery">查询</el-button>
                    <el-button @click="handleReset('form')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="base-table">
            <div class="action">
                <el-button type="primary" @click="handleCreate">新增</el-button>
                <el-button type="danger" @click="handlePatchDelete">批量删除</el-button>
            </div>
            <el-table :data="modelList" @selection-change="handleSelectionChange" border cell-style="padding: 4px 0"
                max-height="600">
                <el-table-column type="selection" width="40" align="center" />
                <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
                    :width="item.width" :formatter="item.formatter" align="center" />
                <el-table-column label="操作" width="250" align="center">
                    <template #default="scope">
                        <el-button size="mini" type="primary" @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button size="mini" type="success" @click="handleSet(scope.row)">配置</el-button>
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="pagination" background layout="prev, pager, next" :total="pager.totalCount"
                :page-size="pager.pageSize" @current-change="handleCurrentChange" />
        </div>
        <el-dialog :title="showAction == 'add' ? '模型新增' : '模型修改'" v-model="showModal" :close-on-click-modal="false"
            :show-close="false" width="500px" center>
            <el-form ref="dialogForm" :model="modelForm" label-width="100px" :rules="rules">
                <el-form-item label="模型名称" prop="modelName">
                    <el-input v-model="modelForm.modelName" placeholder="请输入模型名称" />
                </el-form-item>
                <el-form-item label="协议类型" prop="protocol">
                    <el-select v-model="modelForm.protocol" style="width: 100%;">
                        <el-option value='1' label="MQTT协议"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="modelForm.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleClose">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog title="模型配置" v-model="showSet" :close-on-click-modal="false" :show-close="false" width="60%" center>
            <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
                <el-tab-pane label="属性" name="property">
                    <div class="property-table">
                        <div class="action-table">
                            <el-button type="primary" @click="handleModelPropertyCreate">新增</el-button>
                        </div>
                        <el-table :data="modelPropertyList" border cell-style="padding: 4px 0" max-height="400"
                            height="400">
                            <el-table-column type="selection" width="40" align="center" />
                            <el-table-column v-for="item in modelPropertyColumns" :key="item.prop" :prop="item.prop"
                                :label="item.label" :width="item.width" :formatter="item.formatter" align="center" />
                            <el-table-column label="操作" width="150" align="center">
                                <template #default="scope">
                                    <el-button size="mini" type="primary"
                                        @click="handleModelPropertyEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleModelPropertyDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="事件" name="event">
                    <div class="property-table">
                        <div class="action-table">
                            <el-button type="primary" @click="handleModelEventCreate">新增</el-button>
                        </div>
                        <el-table :data="modelEventList" border cell-style="padding: 4px 0" max-height="400"
                            height="400">
                            <el-table-column type="selection" width="40" align="center" />
                            <el-table-column v-for="item in modelEventColumns" :key="item.prop" :prop="item.prop"
                                :label="item.label" :width="item.width" :formatter="item.formatter" align="center" />
                            <el-table-column label="操作" width="150" align="center">
                                <template #default="scope">
                                    <el-button size="mini" type="primary"
                                        @click="handleModelEventEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleModelEventDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="行为" name="action">
                    <div class="property-table">
                        <div class="action-table">
                            <el-button type="primary" @click="handleModelActionCreate">新增</el-button>
                        </div>
                        <el-table :data="modelActionList" border cell-style="padding: 4px 0" max-height="400"
                            height="400">
                            <el-table-column type="selection" width="40" align="center" />
                            <el-table-column v-for="item in modelActionColumns" :key="item.prop" :prop="item.prop"
                                :label="item.label" :width="item.width" :formatter="item.formatter" align="center" />
                            <el-table-column label="操作" width="150" align="center">
                                <template #default="scope">
                                    <el-button size="mini" type="primary"
                                        @click="handleModelActionEdit(scope.row)">编辑</el-button>
                                    <el-button size="mini" type="danger"
                                        @click="handleModelActionDelete(scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-tab-pane>
            </el-tabs>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleSetClose">关闭</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog :title="showAction == 'add' ? '模型属性新增' : '模型属性修改'" v-model="showPropertySetModal"
            :close-on-click-modal="false" :show-close="false" center width="30%">
            <el-form ref="dialogModelPropertyForm" :model="modelPropertyForm" label-width="100px"
                :rules="modelPropertyRules">
                <el-form-item label="属性标识" prop="field">
                    <el-input v-model="modelPropertyForm.field" placeholder="请输入属性标识" />
                </el-form-item>
                <el-form-item label="属性名称" prop="fieldName">
                    <el-input v-model="modelPropertyForm.fieldName" placeholder="请输入属性名称" />
                </el-form-item>
                <el-form-item label="属性类型" prop="fieldType">
                    <el-input v-model="modelPropertyForm.fieldType" placeholder="请输入属性类型" />
                </el-form-item>
                <el-form-item label="属性单位" prop="fieldUnit">
                    <el-input v-model="modelPropertyForm.fieldUnit" placeholder="请输入属性单位" />
                </el-form-item>
                <el-form-item label="默认值" prop="defaultValue">
                    <el-input v-model="modelPropertyForm.defaultValue" placeholder="请输入默认值" />
                </el-form-item>
                <el-form-item label="是否可写" prop="writable">
                    <el-select v-model="modelPropertyForm.writable" size="medium" style="width: 100%;" clearable>
                        <el-option value=1 label="是"></el-option>
                        <el-option value=0 label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否可读" prop="readable">
                    <el-select v-model="modelPropertyForm.readable" size="medium" style="width: 100%;" clearable>
                        <el-option value=1 label="是"></el-option>
                        <el-option value=0 label="否"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="modelPropertyForm.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleModelPropertyClose">取消</el-button>
                    <el-button type="primary" @click="handleModelPropertySubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog :title="showAction == 'add' ? '模型事件新增' : '模型事件修改'" v-model="showEventSetModal"
            :close-on-click-modal="false" :show-close="false" center width="30%">
            <el-form ref="dialogModelEventForm" :model="modelEventForm" label-width="100px" :rules="modelEventRules">
                <el-form-item label="事件标识" prop="event">
                    <el-input v-model="modelEventForm.event" placeholder="请输入事件标识" />
                </el-form-item>
                <el-form-item label="事件名称" prop="eventName">
                    <el-input v-model="modelEventForm.eventName" placeholder="请输入事件名称" />
                </el-form-item>
                <el-form-item label="事件类型" prop="eventType">
                    <el-select v-model="modelEventForm.eventType" size="medium" style="width: 100%;" clearable>
                        <el-option value=1 label="信息"></el-option>
                        <el-option value=2 label="告警"></el-option>
                        <el-option value=3 label="故障"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="属性参数" prop="propertyIds">
                    <el-select v-model="modelEventForm.propertyIds" placeholder="请选择属性参数" value-key="modelPropertyId"
                        filterable multiple style="width:100%">
                        <el-option v-for="modelProperty in modelPropertyList" :key="modelProperty.modelPropertyId"
                            :label="modelProperty.fieldName" :value="modelProperty.modelPropertyId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="modelEventForm.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleModelEventClose">取消</el-button>
                    <el-button type="primary" @click="handleModelEventSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog :title="showAction == 'add' ? '模型行为新增' : '模型行为修改'" v-model="showActionSetModal"
            :close-on-click-modal="false" :show-close="false" center width="30%">
            <el-form ref="dialogModelActionForm" :model="modelActionForm" label-width="100px" :rules="modelActionRules">
                <el-form-item label="行为标识" prop="action">
                    <el-input v-model="modelActionForm.action" placeholder="请输入行为标识" />
                </el-form-item>
                <el-form-item label="行为名称" prop="actionName">
                    <el-input v-model="modelActionForm.actionName" placeholder="请输入行为名称" />
                </el-form-item>
                <el-form-item label="行为类型" prop="actionType">
                    <el-select v-model="modelActionForm.actionType" size="medium" style="width: 100%;" clearable>
                        <el-option value=1 label="控制"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="属性参数" prop="propertyIds">
                    <el-select v-model="modelActionForm.propertyIds" placeholder="请选择属性参数" value-key="modelPropertyId"
                        filterable multiple style="width:100%">
                        <el-option v-for="modelProperty in modelPropertyList" :key="modelProperty.modelPropertyId"
                            :label="modelProperty.fieldName" :value="modelProperty.modelPropertyId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="modelActionForm.remark" placeholder="请输入备注" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleModelActionClose">取消</el-button>
                    <el-button type="primary" @click="handleModelActionSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import { getCurrentInstance, onMounted, reactive, ref, toRaw } from 'vue'
import utils from "../utils/utils";
export default {
    name: 'model',
    setup() {
        //获取Composition API上下文对象
        const { ctx, proxy } = getCurrentInstance();
        //初始化模型表单对象
        const queryForm = reactive({});
        //初始化模型列表数据
        const modelList = ref([]);
        //模型属性列表数据
        const modelPropertyList = ref([]);
        //模型事件列表数据
        const modelEventList = ref([]);
        //模型行为列表数据
        const modelActionList = ref([]);
        //初始化分页对象
        const pager = reactive({
            pageNum: 1,
            pageSize: 10
        });
        //选中模型列表的对象
        const checkedmodelIds = ref([]);
        //弹框显示对象
        const showModal = ref(false);
        //控制显示对象
        const showSet = ref(false);
        //弹框模型属性显示对象
        const showPropertySetModal = ref(false);
        //弹框事件属性显示对象
        const showEventSetModal = ref(false);
        //弹框行为属性显示对象
        const showActionSetModal = ref(false);
        // 激活的tab名称
        const activeName = ref('property');
        //新增模型表单对象
        const modelForm = reactive({});
        //新增模型属性表单对象
        const modelPropertyForm = reactive({});
        //新增模型事件表单对象
        const modelEventForm = reactive({});
        //新增模型行为表单对象
        const modelActionForm = reactive({});
        //定义模型操作行为
        const showAction = ref('add');
        //定义表单校验规则
        const rules = reactive({
            modelName: [
                {
                    required: true,
                    message: "请输入模型名称",
                    trigger: "blur",
                }
            ],
            protocol: [
                {
                    required: true,
                    message: "请选择协议类型",
                    trigger: "blur",
                },
            ],
            remark: [
                {
                    message: "请输入备注",
                    trigger: "blur",
                },
            ],

        });
        //定义动态表格格式
        const columns = reactive([
            {
                label: "模型名称",
                prop: "modelName"
            },
            {
                label: "协议类型",
                prop: "protocol",
                formatter(row, column, value) {
                    return {
                        "1": "MQTT协议",
                    }[value];
                },
            },
            {
                label: "备注",
                prop: "remark",
            },
            {
                label: "创建时间",
                prop: "createTime",
                formatter(row, column, value) {
                    return utils.formateDate(new Date(value));
                },
            }
        ]);
        // 定义模型属性校验规则
        const modelPropertyRules = reactive({
            field: [
                {
                    required: true,
                    message: "请输入属性标识",
                    trigger: "blur",
                }
            ],
            fieldName: [
                {
                    required: true,
                    message: "请输入属性名称",
                    trigger: "blur",
                },
            ],
            fieldType: [
                {
                    required: true,
                    message: "请输入属性类型",
                    trigger: "blur",
                },
            ],
            writable: [
                {
                    required: true,
                    message: "请选择是否可写",
                    trigger: "blur",
                },
            ],
            readable: [
                {
                    required: true,
                    message: "请选择是否可读",
                    trigger: "blur",
                },
            ],
            fieldUnit: [
                {
                    message: "请输入备注",
                    trigger: "blur",
                },
            ],
            remark: [
                {
                    message: "请输入备注",
                    trigger: "blur",
                },
            ],

        });
        // 定义模型事件校验规则
        const modelEventRules = reactive({
            event: [
                {
                    required: true,
                    message: "请输入事件标识",
                    trigger: "blur",
                }
            ],
            eventName: [
                {
                    required: true,
                    message: "请输入事件名称",
                    trigger: "blur",
                },
            ],
            eventType: [
                {
                    required: true,
                    message: "请选择事件类型",
                    trigger: "blur",
                },
            ],
            remark: [
                {
                    message: "请输入备注",
                    trigger: "blur",
                },
            ],

        });
        // 定义模型行为校验规则
        const modelActionRules = reactive({
            action: [
                {
                    required: true,
                    message: "请输入行为标识",
                    trigger: "blur",
                }
            ],
            actionName: [
                {
                    required: true,
                    message: "请输入行为名称",
                    trigger: "blur",
                },
            ],
            actionType: [
                {
                    required: true,
                    message: "请输入行为类型",
                    trigger: "blur",
                },
            ],
            remark: [
                {
                    message: "请输入备注",
                    trigger: "blur",
                },
            ],

        });
        //定义模型属性动态表格格式
        const modelPropertyColumns = reactive([
            {
                label: "属性标识",
                prop: "field"
            },
            {
                label: "属性名称",
                prop: "fieldName"
            },
            {
                label: "属性类型",
                prop: "fieldType"
            },
            {
                label: "是否可写",
                prop: "writable",
                formatter(row, column, value) {
                    return {
                        1: '是',
                        0: '否'
                    }[value]
                }
            },
            {
                label: "是否可读",
                prop: "readable",
                formatter(row, column, value) {
                    return {
                        1: '是',
                        0: '否'
                    }[value]
                }
            }
        ]);
        //定义模型事件动态表格格式
        const modelEventColumns = reactive([
            {
                label: "事件标识",
                prop: "event"
            },
            {
                label: "事件名称",
                prop: "eventName"
            },
            {
                label: "事件类型",
                prop: "eventType",
                formatter(row, column, value) {
                    return {
                        1: '信息',
                        2: '告警',
                        3: '故障'
                    }[value]
                }
            },
        ]);
        //定义模型属性动态表格格式
        const modelActionColumns = reactive([
            {
                label: "行为标识",
                prop: "action"
            },
            {
                label: "行为名称",
                prop: "actionName"
            },
            {
                label: "行为类型",
                prop: "actionType",
                formatter(row, column, value) {
                    return {
                        1: '控制'
                    }[value]
                }
            },
        ]);
        //初始化接口调用
        onMounted(() => {
            getModelList();
        })
        // 获取模型列表
        const getModelList = async () => {
            let params = { ...queryForm, ...pager };
            try {
                const { list, total } = await proxy.$api.getModelList(params);
                modelList.value = list;
                pager.totalCount = total;
            } catch (error) {
                console.log(proxy.$api);
            }
        };
        //查询事件，获取模型列表
        const handleQuery = () => {
            getModelList();
        }
        // 重置查询表单
        const handleReset = (form) => {
            proxy.$refs[form].resetFields();
            getModelList();
        };
        // 分页事件处理
        const handleCurrentChange = (current) => {
            pager.pageNum = current;
            getModelList();
        };
        //模型单个删除
        const handleDelete = async (row) => {
            await proxy.$api.modelDelete({
                modelIds: [row.modelId]
            })
            proxy.$message.success('删除成功');
            getModelList();
        }
        //批量删除
        const handlePatchDelete = async () => {
            if (checkedmodelIds.value.length == 0) {
                proxy.$message.error('请选择要删除的模型');
                return;
            }
            const res = await proxy.$api.modelDelete({
                modelIds: checkedmodelIds.value
            })
            if (res.rows > 0) {
                proxy.$message.success('删除成功');
                getModelList();
            } else {
                proxy.$message.error('删除失败');
            }

        }
        //表格多选
        const handleSelectionChange = (list) => {
            let arr = [];
            list.map(item => {
                arr.push(item.modelId);
            })
            checkedmodelIds.value = arr;
        }
        //模型新增
        const handleCreate = () => {
            showAction.value = 'add';
            showModal.value = true;
        }
        // 模型弹窗关闭
        const handleClose = () => {
            showModal.value = false;
            handleReset("dialogForm");
        };
        // 模型提交
        const handleSubmit = () => {
            proxy.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    let params = toRaw(modelForm);
                    params.showAction = showAction.value;
                    if (showAction.value == 'add') {
                        let res = await proxy.$api.modelSubmit(params);
                        proxy.$message.success("模型创建成功");
                    } else {
                        let res = await proxy.$api.modelUpdate(params);
                        proxy.$message.success("模型修改成功");

                    }
                    showModal.value = false;
                    handleReset("dialogForm");
                    getModelList();
                }
            });
        };
        // 模型编辑
        const handleEdit = (row) => {
            showAction.value = "edit";
            showModal.value = true;
            proxy.$nextTick(async () => {
                try {
                    const { model } = await proxy.$api.getModelById({ modelId: row.modelId });
                    Object.assign(modelForm, model);
                } catch (error) {
                    console.log(proxy.$api);
                }
            });
        };
        //模型配置弹窗
        const handleSet = (row) => {
            showSet.value = true;
            modelPropertyForm.modelId = row.modelId;
            modelEventForm.modelId = row.modelId;
            modelActionForm.modelId = row.modelId;
            proxy.$nextTick(async () => {
                const params = { modelId: row.modelId };
                getModelPropertyList(params);
            });
        };
        // 获取模型属性列表
        const getModelPropertyList = async (params) => {
            try {
                const { list } = await proxy.$api.getModelPropertyByModelId(params);
                modelPropertyList.value = list;
            } catch (error) {
                console.log(proxy.$api);
            }
        };
        // 获取模型事件列表
        const getModelEventList = async (params) => {
            try {
                const { list } = await proxy.$api.getModelEventByModelId(params);
                modelEventList.value = list;
            } catch (error) {
                console.log(proxy.$api);
            }
        };
        // 获取模型行为列表
        const getModelActionList = async (params) => {
            try {
                const { list } = await proxy.$api.getModelActionByModelId(params);
                modelActionList.value = list;
            } catch (error) {
                console.log(proxy.$api);
            }
        };
        // 模型配置弹窗关闭
        const handleSetClose = () => {
            showSet.value = false;
        }
        // 模型页签切换事件
        const handleTabClick = (tab, event) => {
            var tabName = tab.props.name;
            if (tabName == "property") {
                proxy.$nextTick(async () => {
                    const params = { modelId: modelPropertyForm.modelId };
                    getModelPropertyList(params);
                });
            } else if (tabName == "event") {
                proxy.$nextTick(async () => {
                    const params = { modelId: modelEventForm.modelId };
                    getModelEventList(params);
                });
            } else if (tabName == "action") {
                proxy.$nextTick(async () => {
                    const params = { modelId: modelActionForm.modelId };
                    getModelActionList(params);
                });
            }
        }
        // 模型属性配置弹窗开启
        const handleModelPropertyCreate = () => {
            showAction.value = 'add';
            showPropertySetModal.value = true;
        }

        // 模型属性配置弹窗编辑
        const handleModelPropertyEdit = (row) => {
            showAction.value = "edit";
            showPropertySetModal.value = true;
            proxy.$nextTick(async () => {
                try {
                    const { modelProperty } = await proxy.$api.getModelPropertyById({ modelPropertyId: row.modelPropertyId });
                    Object.assign(modelPropertyForm, modelProperty);
                } catch (error) {
                    console.log(proxy.$api);
                }
            });
        };
        // 模型属性配置弹窗关闭
        const handleModelPropertyClose = () => {
            showPropertySetModal.value = false;
            handleReset("dialogModelPropertyForm");
        };
        // 模型属性配置提交
        const handleModelPropertySubmit = () => {
            proxy.$refs.dialogModelPropertyForm.validate(async (valid) => {
                if (valid) {
                    let params = toRaw(modelPropertyForm);
                    const modelPropertyParams = { modelId: modelPropertyForm.modelId };
                    params.showAction = showAction.value;
                    if (showAction.value == 'add') {
                        let res = await proxy.$api.modelPropertySubmit(params);
                        proxy.$message.success("模型属性创建成功");
                    } else {
                        let res = await proxy.$api.modelPropertyUpdate(params);
                        proxy.$message.success("模型属性修改成功");
                    }
                    showPropertySetModal.value = false;
                    handleReset("dialogModelPropertyForm");
                    getModelPropertyList(modelPropertyParams);
                }
            });
        };
        //模型属性单个删除
        const handleModelPropertyDelete = async (row) => {
            await proxy.$api.modelPropertyDelete({
                modelPropertyIds: [row.modelPropertyId]
            })
            console.log(row);
            proxy.$message.success('删除成功');
            const modelPropertyParams = { modelId: modelPropertyForm.modelId };
            getModelPropertyList(modelPropertyParams);
        };
        // 模型事件配置弹窗开启
        const handleModelEventCreate = () => {
            showAction.value = 'add';
            showEventSetModal.value = true;
        }

        // 模型事件配置弹窗编辑
        const handleModelEventEdit = (row) => {
            showAction.value = "edit";
            showEventSetModal.value = true;
            proxy.$nextTick(async () => {
                try {
                    const { modelEvent } = await proxy.$api.getModelEventById({ modelEventId: row.modelEventId });
                    Object.assign(modelEventForm, modelEvent);
                } catch (error) {
                    console.log(proxy.$api);
                }
            });
        };
        // 模型事件配置弹窗关闭
        const handleModelEventClose = () => {
            showEventSetModal.value = false;
            handleReset("dialogModelEventForm");
        };
        // 模型事件配置提交
        const handleModelEventSubmit = () => {
            proxy.$refs.dialogModelEventForm.validate(async (valid) => {
                if (valid) {
                    let params = toRaw(modelEventForm);
                    const modelEventParams = { modelId: modelEventForm.modelId };
                    params.showAction = showAction.value;
                    if (showAction.value == 'add') {
                        let res = await proxy.$api.modelEventSubmit(params);
                        proxy.$message.success("模型事件创建成功");
                    } else {
                        let res = await proxy.$api.modelEventUpdate(params);
                        proxy.$message.success("模型事件修改成功");
                    }
                    showEventSetModal.value = false;
                    handleReset("dialogModelEventForm");
                    getModelEventList(modelEventParams);
                }
            });
        };
        //模型事件单个删除
        const handleModelEventDelete = async (row) => {
            await proxy.$api.modelEventDelete({
                modelEventIds: [row.modelEventId]
            })
            console.log(row);
            proxy.$message.success('删除成功');
            const modelEventParams = { modelId: modelEventForm.modelId };
            getModelEventList(modelEventParams);
        };
        // 模型行为配置弹窗开启
        const handleModelActionCreate = () => {
            showAction.value = 'add';
            showActionSetModal.value = true;
        }

        // 模型行为配置弹窗编辑
        const handleModelActionEdit = (row) => {
            showAction.value = "edit";
            showActionSetModal.value = true;
            proxy.$nextTick(async () => {
                try {
                    const { modelAction } = await proxy.$api.getModelActionById({ modelActionId: row.modelActionId });
                    Object.assign(modelActionForm, modelAction);
                } catch (error) {
                    console.log(proxy.$api);
                }
            });
        };
        // 模型行为配置弹窗关闭
        const handleModelActionClose = () => {
            showActionSetModal.value = false;
            handleReset("dialogModelActionForm");
        };
        // 模型行为配置提交
        const handleModelActionSubmit = () => {
            proxy.$refs.dialogModelActionForm.validate(async (valid) => {
                if (valid) {
                    let params = toRaw(modelActionForm);
                    const modelActionParams = { modelId: modelActionForm.modelId };
                    params.showAction = showAction.value;
                    if (showAction.value == 'add') {
                        let res = await proxy.$api.modelActionSubmit(params);
                        proxy.$message.success("模型行为创建成功");
                    } else {
                        let res = await proxy.$api.modelActionUpdate(params);
                        proxy.$message.success("模型行为修改成功");
                    }
                    showActionSetModal.value = false;
                    handleReset("dialogModelActionForm");
                    getModelActionList(modelActionParams);
                }
            });
        };
        //模型行为单个删除
        const handleModelActionDelete = async (row) => {
            await proxy.$api.modelActionDelete({
                modelActionIds: [row.modelActionId]
            })
            console.log(row);
            proxy.$message.success('删除成功');
            const modelActionParams = { modelId: modelActionForm.modelId };
            getModelActionList(modelActionParams);
        };

        return {
            queryForm,
            modelList,
            modelPropertyList,
            modelEventList,
            modelActionList,
            columns,
            modelPropertyColumns,
            modelEventColumns,
            modelActionColumns,
            pager,
            checkedmodelIds,
            showModal,
            showSet,
            showPropertySetModal,
            showEventSetModal,
            showActionSetModal,
            activeName,
            modelForm,
            modelPropertyForm,
            modelEventForm,
            modelActionForm,
            showAction,
            rules,
            modelPropertyRules,
            modelEventRules,
            modelActionRules,
            getModelList,
            getModelPropertyList,
            getModelEventList,
            getModelActionList,
            handleQuery,
            handleReset,
            handleCurrentChange,
            handleDelete,
            handlePatchDelete,
            handleSelectionChange,
            handleCreate,
            handleClose,
            handleSubmit,
            handleEdit,
            handleSet,
            handleSetClose,
            handleTabClick,
            handleModelPropertyCreate,
            handleModelPropertyEdit,
            handleModelPropertyClose,
            handleModelPropertySubmit,
            handleModelPropertyDelete,
            handleModelEventCreate,
            handleModelEventEdit,
            handleModelEventClose,
            handleModelEventSubmit,
            handleModelEventDelete,
            handleModelActionCreate,
            handleModelActionEdit,
            handleModelActionClose,
            handleModelActionSubmit,
            handleModelActionDelete
        }
    }
}
</script>

<style lang="scss">
.property-table {
    border-radius: 5px;
    background: #ffffff;

    .action-table {
        border-radius: 5px 5px 0px 0px;
        background: #ffffff;
        padding-bottom: 10px;
        border-bottom: 1px solid #ece8e8;
    }

    .pagination {
        text-align: right;
        padding: 10px;
    }
}
</style>